<template>
	<!--数据统计-列表-->
	<view class="page-content">
		<view class="page-top">
			<!-- 标题栏和状态栏占位符 -->
			<view class="titleNview-placing"></view>
			<!-- 返回 + 搜索 -->
			<w-tit leftIcon="arrowleft" color="#595757" background="#fff" fontweight="600" @confirm="rightSearch"
				rightIconNum="two" is_searchs="true">
			</w-tit>
		</view>
		<scroll-view class="page-body" :scroll-top="scrollTop" scroll-y="true" @scrolltolower="loadmore()">
			<!--搜索列表-->
			<template v-if="sel_data && sel_data.length > 0 ">
				<view class="body-box">
					<block v-for="(item,index) in sel_data" :key="index">
						<view class="box-li" @click="todetail(item.task_id,item.id)">
							<image class="box-li-img" :src="item.url"></image>
							<view class="box-li-r">
								<view class="tit">{{item.image_name}}</view>
								<view class="mon">金额：{{item.price}}</view>
								<view class="num">数量：{{item.number}}</view>
							</view>
						</view>
					</block>
				</view>
				<!-- 上拉加载 -->
				<view class="det-con-more">
					<load-more :loadmore="load_more1"></load-more>
				</view>
			</template>
			<!--无数据-->
			<empty v-else no-full type="noData"></empty>
		</scroll-view>
	</view>
</template>

<script>
	import wTit from '@/components/w-tit/w-tit-back-serch-add.vue'; //标题
	import loadMore from '@/components/uni-load-more/load-more.vue';
	import picLi from '@/pages/components/pic_book_li2.vue';
	import {
			mapGetters,
			mapActions,
			mapState
		} from 'vuex';
	import { taskDataInfos,taskAlbumJoinLists } from '@/common/api.js';
	export default {
		components: {
			loadMore,
			picLi,
			wTit
		},
		data() {
			return {
				active: 1,
				scrollTop: 0,
				noData: false,
				load_more1: '', //下拉加载文字
				load_sta: false, //是否是加载状态
				sel_data: [{
					id: 1,
					img: '/static/data-img/img.jpg',
					title: '旅游画册',
					statu: 1,
					num:99,
					money: '9999',
				}, {
					id: 2,
					img: '/static/data-img/img.jpg',
					title: '2020冬季新品海报2020冬季新品海报2020冬季新品海报2020冬季新品海报',
					statu: 1,
					num:99,
					money: '88888',
				}, {
					id: 3,
					img: '/static/data-img/img.jpg',
					title: '健身画册',
					statu: 1,
					num:99,
					money: '88888',
				}, {
					id: 4,
					img: '/static/data-img/img.jpg',
					title: '女装画册',
					statu: 1,
					num:99,
					money: '88888',
				}],
				page_type: '',
				userType: '', //system-首页 user-用户
				pageStatu: '0', //1-开权限 2-没有权限
				id: '',
				pageType:'',
				image_name:'',
			}
		},
		onLoad(option) {
			console.log(222, option)
			if(option.id){
				this.id = option.id;
			}
			if (option.pageType === 'pop') {
				this.pageType = option.pageType;
			} else if (option.pageType === 'prop') {
				this.pageType = option.pageType;
			}
			this.getdata();
		},
		methods: {
			//搜索
			rightSearch(res){
				console.log(333,res.value)
				this.image_name = res.value;
				this.getdata();
			},
			getdata(){
				taskAlbumJoinLists({id:this.id,image_name:this.image_name}).then(res=>{
					if(res.code === 2000){
						this.sel_data = res.data.data;
					}
				})
			},
			handleActive(e) {
				console.log(44, e)
				this.active = e
			},
			//跳转详细页
			todetail(task_id,id) {
				uni.navigateTo({
					url: `/pages/picBook/statisticsDetail?&task_id=${task_id}&id=${id}&pageType=${this.pageType}`
				})
			},
			//管理员替换封面
			replace_img(e) {

			},
			//删除
			deleted(e) {
				console.log(333, e)
			},
			//置顶
			checked(id, e) {
				if (this.sel_data && this.sel_data.length > 0) {
					this.sel_data.forEach(item => {
						if (item.id === id) {
							if (e === 1) {
								item.stick_statu = 2
							} else {
								item.stick_statu = 1
							}
						}
					})
				}
			},
			loadmore() {

			},
		}
	}
</script>

<style lang="scss">
	.titleNview-placing {
		height: var(--status-bar-height);
		box-sizing: content-box;
		background: $uni-bg-color;
		display: block;
		position: sticky;
		top: 0rpx;
		z-index: 9999;
		overflow: hidden
	}

	.page-content {
		width: 100vw;
		background: $uni-bg-color;
		height: 100%;
		.page-top {
			display: flex;
			flex-direction: column;
			position: sticky;
			top: 0;
			left: 0;
			right: 0;
			z-index: 3;
			height: 90rpx + var(--status-bar-height);
			border-bottom: 1rpx solid #F2F4F5;
		}

		.page-body {
			display: flex;
			height: calc(100% - 180rpx);

			.body-box{
				display: flex;
				flex-direction: column;
				padding: 30rpx 30rpx 20rpx 30rpx;
				background: $uni-bg-color;
				margin-bottom: 20rpx;

				.box-li {
					display: flex;
					margin-bottom: 30rpx;
					padding-bottom: 30rpx;
					border-bottom: 1rpx solid #f5f5f5;
					.box-li-img{
						width: 300rpx;
						height: 172rpx;
						margin-right: 30rpx;
						border-radius: 10rpx;
					}
					.box-li-r{
						width: calc(100% - 330rpx);
						height: 172rpx;
						.tit{
							width: 100%;
							font-size: 32rpx;
							font-weight: 400;
							color: $font-color-3;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							margin-bottom: 20rpx;
						}
						.mon{
							font-size: 28rpx;
							font-weight: 400;
							color: $font-color-3;
							margin-bottom: 20rpx;
						}
						.num{
							font-size: 28rpx;
							font-weight: 400;
							color: $font-color-3;
						}
					}
					
				}

				.box-li:last-of-type {
					border-bottom: none;
					margin-bottom: 0rpx;
				}
			}
		}
	}
</style>
